<template>
  <div style="padding: 20px">
    <div class="title_font">
      产品详情
    </div>
    <div>
      <el-descriptions
          class="margin-top"
          :column="2"
          border
      >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            ID
          </div>
        </template>
        {{productdetailslist.ID}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            创建时间
          </div>
        </template>
        {{productdetailslist.createtime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            图标
          </div>
        </template>
        <img src="../../../../public/home.png" style="width: 10px; height: 10px">
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            产品名称
          </div>
        </template>
        {{productdetailslist.productname}}
      </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              最高额度（元）
            </div>
          </template>
          {{productdetailslist.maxprice}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              年利率（%）
            </div>
          </template>
          {{productdetailslist.interestrate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              贷款期限（月）
            </div>
          </template>
          {{productdetailslist.term}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              产品类型
            </div>
          </template>
          {{productdetailslist.type}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              产品标签
            </div>
          </template>
          <el-tag style="margin-left: 5px" size="small" v-for="item in productdetailslist.label"> {{item}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              产品介绍
            </div>
          </template>
          {{productdetailslist.introduce}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as ProductApi from '@/api/hutai/productMana'
import {ref} from "vue";
const router = useRouter();
const queryParams = ref({
  productName:null,
  iconStr: null,
  maxAmount: null,
  annualInterest: null,
  loanTime: null,
  productType: null,
  id:null,
  productLable: null,
  productIntroduce: null,
  productImg: null,
  status: null,
  createTime: null,
})
const productdetailslist=reactive({
  ID:'',
  createtime:"",
  productname:"",
  maxprice:"",
  interestrate:"",
  term:"",
  type:"",
  label:[],
  introduce:""
})
ProductApi.getProductList(queryParams).then(res=>{
  for (const item in res.list){

    if (res.list[item].id==router.currentRoute.value.query.id){
      let date = new Date(parseInt(res.list[item].createTime));
      let Year = date.getFullYear();
      let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
      let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
      let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
      let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
      let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;

      productdetailslist.ID=res.list[item].id
      productdetailslist.createtime=GMT
      productdetailslist.productname=res.list[item].productName
      productdetailslist.maxprice=res.list[item].maxAmount
      productdetailslist.interestrate=res.list[item].annualInterest
      productdetailslist.label.push(res.list[item].productLable)
      productdetailslist.term=res.list[item].loanTime
      productdetailslist.type=res.list[item].productTypeName
      productdetailslist.introduce=res.list[item].productIntroduce
    }
  }

})

</script>
<style lang="scss">
.title_font{
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}
</style>
